<template>
  <div class="tw-libplayer" :class="{xaudio: type==='audio'}">
    <video v-if="autoplay" ref="player" controls autoplay class="video-js" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"></video>
    <video v-else ref="player" controls class="video-js" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"></video>

    <div v-if="isTransing"
      class="tw-libplayer-cover"
      @click="getTranscodingPath">
      <div class="tw-libplayer-cover-inner">
        <i class="el-icon-loading"></i>
        <div class="tw-libplayer-cover-text">{{msg}}</div>
      </div>
    </div>

    <i v-if="type==='audio'" class="tw-ico xplaudio"></i>
  </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import player from '../tw-lib-base/player/mixins'

export default {
  name: 'lib-libplayer',

  mixins: [style, player],

  props,

  computed: {
    style () {
      return {
        videoWidth: this.videoWidth,
        videoHeight: this.videoHeight
      }
    }
  },

  methods: {
    setStyle () {
      let style = ''

      if (this.videoWidth) {
        style += `
            ::root.tw-libplayer .video-js {
              width: ${this.videoWidth};
            }
          }
        `

        if (this.videoHeight) {
          style += `
            ::root.tw-libplayer .video-js {
              height: ${this.videoHeight};
            }
          }
        `

          this.addStyle(style)
        }
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
